<template>
  <div class="my">
    <!-- 头部 -->
    <section id="myHead">
      <section class="headBox" :style="{backgroundImage: 'url(' + userInfo.photo + ')'}"> 
        <section id="fuzzy">
          <section id="headImg">
            <section id="_img">
              <img v-bind:src="userInfo.photo" alt="用户头像">
            </section>
            <span id="_name">
              {{userInfo.nick}}
            </span>
          </section>
          <section id="ranking">
            <span class="rankNum">
              <!-- 名次: {{'暂无'}} -->
            </span>
            <!-- <router-link :to="'/rankList/' +(userInfo.channelLv>0?1:2)" class="seeRanking" >
              查看排行
            </router-link> -->
            <a @click="gotoChannle" class="seeRanking">
              渠道登录
            </a>
          </section>
        </section>
      </section>
    </section>
    <!-- 功能栏 -->
    <section id="nineBar">
      <dl class="BarTab">
        <router-link :to="'/ledou'">
          <dd>
            <img src="../assets/my/ld.png" alt="">
            <span>
              我的乐豆
            </span>
          </dd>
        </router-link>
        <router-link :to="'/lxFund'">
          <dd>
            <img src="../assets/my/jj.png" alt="">
            <span>
              乐销基金
            </span>
          </dd>
        </router-link>        
        <router-link :to="'/points'">
          <dd>
            <img src="../assets/my/jf.png" alt="">
            <span>
              我的积分
            </span>
          </dd>
        </router-link>        
        
      </dl>
      <dl class="BarTab">
        <router-link to='/myOrder'>
          <dd>
            <img src="../assets/my/dd.png" alt="">
            <span>
              我的订单
            </span>
          </dd>
        </router-link>
        <router-link to='/collection'>
          <dd>
            <img src="../assets/my/sc.png" alt="">
            <span>
              收藏
            </span>
          </dd>
        </router-link>
        <router-link to='/myFootPrint'>
          <dd>
            <img src="../assets/my/zj.png" alt="">
            <span>
              足迹
            </span>
          </dd>
        </router-link>
        
      </dl>
      <dl class="BarTab">
        <router-link to='/deliveryAddress/0'>
          <dd>
            <img src="../assets/my/dz.png" alt="">
            <span>
              收货地址
            </span>
          </dd>
        </router-link>
        <router-link to='/coupon'>
          <dd>
            <img src="../assets/my/qt.png" alt="">
            <span>
              我的卡券
            </span>
          </dd>
        </router-link>
        <a @click="upChannel">
          <dd>
            <img src="../assets/my/sq.png" alt="">
            <span>
              申请代理
            </span>
          </dd>
        </a>
      </dl>
      <dl class="BarTab bar_bom">
        <a @click="showQrCode">
          <dd>
            <img src="../assets/my/qrCode.png" alt="">
            <span>
              二维码
            </span>
          </dd>
        </a>
        <router-link to='/userAgreement'>
          <dd>
            <img src="../assets/my/sh.png" alt="">
            <span>
              用户协议
            </span>
          </dd>
        </router-link>
        <router-link to='/aboutUs'>
          <dd>
            <img src="../assets/my/wm.png" alt="">
            <span>
              关于我们
            </span>
          </dd>
        </router-link>
      </dl>
    </section>
        <!-- 推荐 -->
    <section class="recom">
      <img src="../assets/other/tj.png" alt="" class="recomImg">
      <!-- <section class="recomGoods"              
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        infinite-scroll-immediate-check ="loading"
      > -->
      <section class="recomGoods">
        <section class="recomGoodsList" v-for="(recomList,index) in recomList" :key="index" @click="seeSec(recomList.id)">
          <section class="_img">
            <img v-bind:src="recomList.thumbnail" alt="">
          </section>
          <section class="_sec">
            <p class="_title">
              {{recomList.name}}
            </p>
            <p class="_price">
              {{recomList.defaultPrice/100 | currency}}
            </p>
          </section>
        </section> 
        <!-- 加载动画 -->
        <!-- <loadmore  v-show="loadingDom"></loadmore> -->
      </section>
    </section>
    <!-- 申请渠道 -->
    <upLv ref="upLv"></upLv>
    <!-- tab菜单栏 -->
    <tabbar :selected='selected' :tabs='tabs'></tabbar>
    <!-- 二维码 -->
    <qrCode :qrCodeData="qrCodeUrl" :inventerImg="userInfo.photo" ref="myCode"></qrCode>
  </div>
</template>
<script>
  import tabbar from '../components/tabbar'
  // import loadmore from '../components/loadmore'
  import upLv from '../components/upLv'
  import qrCode from '../components/qrCode'
  import { userInfoGet, WXShare } from '../libs/publicMethod'  
  import { getAccountAmount, product } from '../libs/interface'
  export default {
    // components: { tabbar, loadmore, upLv, userInfoGet, WXShare, getAccountAmount, product},
    components: { tabbar, upLv, qrCode, userInfoGet, WXShare, getAccountAmount, product},
    data () {
      return {
        userInfo: userInfoGet(), // 用户信息
        account: {}, // 用户账户
        // 底部菜单初始化
        selected: 'tab5',
        tabs: [
          require('../assets/tabs/sc.png'),
          require('../assets/tabs/zq.png'),
          require('../assets/tabs/fx.png'),
          require('../assets/tabs/ylc.png'),
          require('../assets/tabs/user2.png')
        ],
        // 推荐商品
        recomList: [],
        // loading:false, //加载更多
        // loadingDom: false, // 加载动画
        offset:0, // 加载条数
        qrCodeUrl:'https://www.xiewan8.com/lyApp?&gotoPage=/mall&inviterID='+userInfoGet().id+'&type=1#/wxshare',// 二维码参数
      }
    },
    mounted(){
      document.body.style.paddingBottom = '60px'
      // 分享
      var Sdata = {                                                          //分享请求配置
        gotoPage:this.$route.path,                                          //邀请者链接         
        inviterID: userInfoGet().id,                                                        //链接带的参数
        type:1,
        desc:'享高端品质，品精致生活，尽在乐销商城！',
        imgUrl:'http://120.77.73.224:80/group1/M00/00/05/eE1J4FoedWqALp8pAABLzkI6gxQ837.png',                                                       //链接图片（小图）     
        shareTitle: '【' + userInfoGet().nick + '】' + '邀请您一起逛乐销商城'              //邀请话
      }
      WXShare.topShare(Sdata)
      this.getAccount();
      this.loadGoods();
    },
    methods: {
      // gotoPay(){
      //   window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2Findex.html%23%2Frecharge%2F10%2Ftype%2Fuserid&response_type=code&scope=snsapi_base&state=pingpp#wechat_redirect'
      // },
      // 获取用户账户
      getAccount(){
        let vm = this
        let params = {
          memberid: userInfoGet().id
        }
        getAccountAmount(params, (data)=>{
          if (data.code ==1) {
            vm.account = data.payload
          }
        })
      },
      // 加载商品
      loadGoods () {
        let vm = this
        let params = {
          productType: -1,
          runType: -1,
          limit: 4,
          offset: Math.round(Math.random() * 30),
          likeStr: '',
          sidx: 'createTime',
          sord: 'DESC'
        }
        product(params,(data)=>{       
          if (data.code == 1 && data.payload.length>0) {
            vm.recomList = data.payload
          }else{
            vm.$toast('暂未请求到数据,请稍后再试')
          }
        })
      },
      // 上拉加载更多
      // loadMore() {
      //   let vm = this
      //   vm.loading = true;
      //   vm.loadingDom = true;
      //   vm.offset=10 + vm.offset;
      //   let params = {
      //     productType: -1,
      //     runType: 1,
      //     limit: 10,
      //     offset: vm.offset,
      //     likeStr: '',
      //     sidx: 'createTime',
      //     sord: 'DESC'
      //   }
      //   product(params,(data)=>{       
      //     if (data.code == 1 && data.payload.length>0) {
      //       vm.$nextTick(()=>{
      //         data.payload.forEach((item) => {              
      //           vm.recomList.push(item);
      //         })
      //       })
      //       vm.loading = false;
      //     }else{
      //       this.loading = true;
      //       vm.offset-=10;
      //       vm.$toast('暂未请求到数据,请稍后再试')
      //     }
      //     vm.loadingDom = false;
      //   })
      // }, 
      // 跳转详情页
      seeSec (val) {
        // sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
        sessionStorage.removeItem('coupon')
        this.$router.push('/goods/'+val)
      },
      // 升级vip会员
      upChannel () {
        this.$refs.upLv.showRemind();
      },
      // 查看排行
      gotoChannle () {
        // this.$toast('暂未开放')
        window.location.href = "http://www.xiewan8.com/dist"
      },
      // 显示我的二维码
      showQrCode () {
        this.$refs.myCode.showQrCode();
      }
    },
    filters: {
      currency: function (value) {
        if (!value) return ''
        return '￥' + value
      }
    }
  }
</script>

<style>

  .my{
    position: absolute;
    width: 100%;
    /* height: 100%; */
    margin-bottom: 15%;
  }
  /* 头部样式 */
  #myHead{
    position: relative;
    height: 30%;
    overflow: hidden;
    text-align: center;
    color:rgba(255,255,255,1);
  }
  .headBox{
    position: relative;
    width: 120%;
    height: 100%;
    margin-left: -10%;
    border-radius: 0 0 300% 300%;
    overflow: hidden;
    background-size: 100%;
    background-position: center;
  }
  #fuzzy{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    text-align: center;
  }
  #headImg{
    margin-top: 3%;
  }
  #headImg #_name{
    font-size: 1rem;
    font-weight: bold;
  }
  #_img{    
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
  }
  #_img img{
    width: 100%;
    height: 100%;
  }
  /* #money{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    text-align: center;
    margin-bottom: 7%;
    font-size: .8rem;
  } */
  .rankNum{
    font-size: .85rem;
    margin: .2rem;
  }
  .seeRanking{
    display: block;
    color: white;
    padding: .3rem .6rem;
    background-color: #E93B3D;
    border-radius: 1rem;
    margin-top: 7%;
    font-size: .9rem;
    margin-bottom: 10%;
  }
  /* 九宫格 */
  #nineBar{
    margin-top: 1rem;
  }
  .BarTab{    
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    text-align: center;
    width: 90%;
    margin-left: 5%;
    background-color: white;
    padding: 0 .5rem;
    box-sizing: border-box;
    border-radius: 1rem;
    margin-top: .5rem;
    font-size: .8rem;
  }
  .BarTab a{
    width: 33%;
  }
  .BarTab dd{
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;
    text-align: center;
    padding: .5rem;
    box-sizing: border-box;
    color: #333;
  }
  .BarTab dd img{
    height: 2rem;
    margin-bottom: .2rem;
  }
  
/* 推荐商品 */
.recomImg{
  width:40%;
  margin: .8rem 0;
}
.recomGoods{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  background-color: white;
  padding-top: .5rem;
}
.recomGoodsList{
  width: 47.5%;
  -moz-box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  -webkit-box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  box-shadow: 0rem 3px 3px 0rem rgba(0,0,0,.1); 
  border-radius: .8rem;
  overflow: hidden;
  margin-left: 1.5%;
  margin-bottom: .5rem;
}
.recomGoodsList ._img{
  width: 100%;
  height: 8rem;
}
.recomGoodsList ._img img{
  width: 100%;
  height: 100%;
}
.recomGoodsList ._title{
  font-size: .9rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
} 
.recomGoodsList ._sec{
  padding: .5rem;
}
.recomGoodsList ._price{
  text-align: left;
  padding-left: .5rem;
  font-size: 1.3rem;
  color: red;
}
.bar_bom{
  justify-content: end;
}
</style>
